<template lang="html">
  <div class="all">
    <selfHeader></selfHeader>
    <div class="main">
      <div v-for="(item, index) in list" :key="index" class="itemBox">
        <div class="nameBox">
          <span> {{ item.realName }}</span>
          <p> {{ item.phone }}</p>
        </div>
        <div class="addresBox">
          <img src="../assets/location.png" alt="">
          <b>地址: {{ item.province }}-{{ item.city }}-{{ item.district }}-{{ item.detail }}</b>
        </div>
        <div class="btnBox">
          <img @click="edit(item)" src="../assets/edit.png" alt="">
          <img @click="remove(item)" src="../assets/del.png" alt="">
        </div>
      </div>
    </div>
    <button class="btn" @click='addAddress'>新增地址</button>
  </div>
</template>

<script>
import {
  appDefault,
  appDefaultSet,
  appDel,
  appEdit,
  appList
} from '@/http/api'
import selfHeader from '@/common/header'
import {Toast} from 'mint-ui'

export default {
  components: {
    selfHeader
  },
  data() {
    return {
      list: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      const user = JSON.parse(localStorage.getItem('UserMessage'))
      const data = {
        uid: user.user.uid
      }
      const res = await appList(data)
      this.list = res.data.list
    },
    edit(item) {
      console.log(item)
      this.$router.push({
        path: '/updateAddress',
        query: {
          data: item
        }
      })
    },
    addAddress() {
      this.$router.push({path: '/addAddress'})
    },
    async remove(item) {
      const user = JSON.parse(localStorage.getItem('UserMessage'))
      const data = {
        uid: user.user.uid,
        ...item
      }
      const res = await appDel(data)
      if (res.code * 1 === 200) {
        Toast('删除成功')
        this.getList()
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import '../assets/fz.less';
@import '../assets/index/style.css';
@import '../assets/user/icon/carstyle.css';

.all {
  background-color: #f5f5f5;
}

.main {
  width: 100%;
  padding: 60px 10px 20px;
  box-sizing: border-box;

  .itemBox {
    margin-top: 10px;
    box-sizing: border-box;
    padding: 10px 6px;
    background-color: white;
    border-radius: 6px;
    overflow: hidden;
  }

  div {
    span {
      font-size: 18px;
    }

    p {
      font-size: 16px;
      margin-top: 6px;
    }

    b {
      font-weight: normal;
    }

    .btnBox {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-top: 20px;
      padding: 0;
      border: 0;

      img {
        width: 20px;
        height: 20px;
        margin-right: 10px;
      }
      img:first-child {
        width: 18px;
        height: 18px;
        margin-right: 20px;
      }

    }
  }
}

.nameBox {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;

  span {
    font-size: 18px;
    font-weight: 600;
  }

  p {
    margin-left: 10px;
    font-size: 14px;
    color: #8c8c8c;
  }
}
.addresBox {
  margin-top: 6px;
  img {
    width: 14px;
    height: 14px;
  }
  b {
    font-weight: normal;
    margin-left: 5px;
    color: #8c8c8c;
    width: 100%;
  }
}
</style>
